<template>
	<view class="videoTutorialPage">
		<!-- 顶部选项卡 -->
		<scroll-view class="scrollRow" show-scrollbar :scroll-x="true" scroll-with-animation="true" @scroll="scroll"
		 :scroll-into-view="scrollInto">
			<view v-for="(item,index) in tabBars" :key="index" :id="'tab'+index" class="scrollRowItem" :class="tabBarsIndex === index ? 'tabBarsIndexActive': ''"
			 @click="changeTab(index)">{{item.type}}</view>
		</scroll-view>

		<view class="index">
			<!-- 滑动块 -->
			<swiper class="swiper" :duration="150" circular :current="tabBarsIndex" @change="onChangeTab">
				<swiper-item v-for="(item,index) in tabBars" :key="index" class="swiperItem">
					<scroll-view scroll-y class="swiperView" @scrolltolower="loadmore(index)">
						<template v-if="list.length > 0">
							<!-- <block v-for="(items,indexs) in list" :key="indexs">
								<video-list :items="items" :indexs="indexs" />
							</block> -->

						</template>

						<!-- 当没有数据时提示信息 -->
						<template v-else>
							<nothing />
						</template>

					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoList from "@/components/videoTutorial/video-list.vue";
	export default {
		components: {
			videoList
		},
		onLoad() {
			this.getTabBars();
			this.getVideo();
		},
		data() {
			return {
				scrollInto: null,
				tabBarsIndex: 0,
				tabBars: [],
				list: [],
			};
		},
		methods: {
			// 切换选项
			changeTab(index) {
				if (this.tabBarsIndex === index) return;
				this.tabBarsIndex = index;
				this.scrollInto = `tab${index}`;
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			// 滚动时候触发事件
			scroll(e) {},
			// 获取头部tab栏的内容了
			async getTabBars() {
				let res = await uniCloud.callFunction({
					name: 'videoCategory',
					data: {
						methods: "get"
					}
				});
				this.tabBars = res.result.data;
			},
			// 得到电影资源
			async getVideo() {
				let res = await uniCloud.callFunction({
					name: 'video',
					data: {
						methods: "get"
					}
				});
				this.list = res.result.data;
				console.log(this.list);
			},
		}
	}
</script>

<style lang="scss">
	.scrollRow {
		width: 100%;
		height: 70rpx;
		white-space: nowrap;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.scrollRowItem {
		display: inline-block !important;
		width: 18vw;
		height: 100%;
		text-align: center;
		line-height: 70rpx;
		border-radius: 5rpx;
		font-size: 29rpx;
		letter-spacing: 10rpx;

		&:not(:last-of-type) {
			margin-right: 15rpx;
		}
	}

	// 选中状态的tab
	.tabBarsIndexActive {
		@include fontMainColor;
		font-size: 32rpx;
		font-weight: bolder;
	}

	.index {
		height: calc(100% - 70rpx);
	}

	.swiperView {
		padding-top: 20rpx;
	}

	.loadmore {
		@include flexCenterCenter;
	}
</style>
